<template>
  <div class="order">
    <van-nav-bar
      title="order"
      left-text="返回"
      right-text="Mine"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="loadData"
    >
      <!-- index+1+''是为了把原来的数字转化为字符串，否则会报错 -->
      <div class="ordersListUl">
        <ul>
          <li v-for="(item, index) in orders" :key="item.id">
            <div class="side">{{ index + 1 }}</div>
            <div class="inner">
              <p>收件人：{{ item.receiver }}</p>
              <p>收件人联系方式：{{ item.regions }}</p>
              <p>订单价格： {{ item.price }}</p>
              <p class="muo">收货地址 {{ item.address }}</p>
              <div class="btn">
                <van-button
                  class="buttons"
                  type="info"
                  @click="$router.push('/orderdetail')"
                  >查看详情</van-button
                >
                <van-button
                  type="danger"
                  @click="delorder(item.id)"
                  >删除订单</van-button
                >
              </div>
            </div>
          </li>
        </ul>
      </div>
    </van-list>
  </div>
</template>

<script>
import { reqorder } from "@/api/order";
export default {
  data() {
    return {
      orders: [],
      page: 1,
      per: 10,
      pages: 1,
      loading: false,
      finished: false,
    };
  },
  computed: {},
  watch: {},

  methods: {
    async loadData() {
      this.loading = true;
      const res = await reqorder(this.page);
      console.log(res);
      this.orders.push(...res.orders);
      this.pages = res.pages;
      this.page += 1;
      this.loading = false;
      console.log(this.orders);
      if (this.page > this.pages) {
        this.finished = true;
      }
    },
    onClickLeft() {
      this.$router.go(-1);
      
    },
    onClickRight() {
      this.$router.push("Mine");
    },
  },
  created() {
    this.loadData();
  },
  mounted() {},
  components: {},
};
</script>
<style scoped>
</style>
